<template>
  <BasicTable @register="registerTable" :rowSelection="rowSelection">
    <!-- 挂起状态 -->
    <template #procdefState="{ text }">
      <a-tag v-if="text === 0" color="green">激活</a-tag>
      <a-tag v-if="text === 1" color="pink">挂起</a-tag>
    </template>
    <!--操作栏-->
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
    </template>
    <template #bodyCell="{ column, record, index, text }"> </template>
  </BasicTable>

  <ActProcessDefStartModal ref="registerStartModal" />
  <ActProcessDefConfig @register="registerConfigModal" />
  <ActProcessDefResourceModal @register="registerResourceModal" />
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { BasicTable, TableAction } from '/@/components/Table'
  import { useListPage } from '/@/hooks/system/useListPage'
  import { columns } from '../../ActProcessDef.data'
  import { deleteOne, updateState, convertToModel } from '../../ActProcessDef.api'
  import { listPage } from './ActProcessDefVersion.api'
  import { usePermission } from '/@/hooks/web/usePermission'
  import { useModal } from '@/components/Modal'
  import ActProcessDefStartModal from '../ActProcessDefStartModal.vue'
  import ActProcessDefConfig from '../actProcessDefConfig/ConfigModal.vue'
  import ActProcessDefResourceModal from '../ActProcessDefResourceModal.vue'
  import { useRoute } from 'vue-router'

  const { hasPermission } = usePermission()

  const queryParam = reactive<any>({})
  const registerStartModal = ref()

  const route = useRoute()
  const procDefKey = route.params?.procDefKey ?? -1

  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '流程部署',
      api: listPage,
      columns,
      canResize: false,
      useSearchForm: false,

      actionColumn: {
        width: 280,
        fixed: 'right',
      },
      beforeFetch: (params) => {
        queryParam.procDefKey = procDefKey
        return Object.assign(params, queryParam)
      },
    },
  })
  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext

  // 注册业务配置Model
  const [registerConfigModal, { openModal: openConfigModal }] = useModal()

  // 流程资源：流程图、Bpmn
  const [registerResourceModal, { openModal: openResourceModal }] = useModal()

  /**
   * 业务配置
   * @param record
   */
  function handleBusinessConfig(record: Recordable) {
    openConfigModal(true, {
      processDefId: record.id,
    })
  }

  /**
   * 激活|挂起事件
   */
  function handleUpdateState(record: Recordable) {
    const state = record.isSuspended == 0 ? 'suspend' : 'active'
    updateState({ procDefId: record.id, state: state }, handleSuccess)
  }

  function handleConvertToModel(record: Recordable) {
    convertToModel({ procDefId: record.id })
  }

  /**
   * 流程图
   */
  function handleResourceImage(record: Recordable) {
    // registerAddModal.value.showFlowchart(record);
    openResourceModal(true, { processDefId: record.id })
    // window.open('/jeecgboot/act/procdef/resourceImage/' + record.id, '_blank');
  }

  function handleStartProcess(record: Recordable) {
    registerStartModal.value.start(record)
  }

  function handleInstanceManage(record: Recordable) {
    alert('实例管理')
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.deploymentId }, handleSuccess)
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    ;(selectedRowKeys.value = []) && reload()
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '启动',
        onClick: handleStartProcess.bind(null, record),
        ifShow: () => {
          // return hasPermission('act:procdef:start')
          return !record.isSuspended
        },
      },
      {
        label: '业务配置',
        onClick: handleBusinessConfig.bind(null, record),
      },
      {
        label: '流程图',
        onClick: handleResourceImage.bind(null, record),
      },
    ]
  }

  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [
      {
        label: record.isSuspended == 0 ? '挂起' : '激活',
        popConfirm: {
          title: '是否确认' + (record.isSuspended == 0 ? '挂起' : '激活'),
          confirm: handleUpdateState.bind(null, record),
          placement: 'topLeft',
        },
        ifShow: () => {
          return hasPermission('act:procdef:updateState')
        },
      },
      {
        label: '实例管理',
        onClick: handleInstanceManage.bind(null, record),
      },
      {
        label: '转换为模型',
        popConfirm: {
          title: '是否确认转换为模型',
          confirm: handleConvertToModel.bind(null, record),
          placement: 'topLeft',
        },
        ifShow: () => {
          return hasPermission('act:procdef:convertToModel')
        },
      },
      {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
          placement: 'topLeft',
        },
      },
    ]
  }
</script>

<style lang="less" scoped></style>
